<template>
	<view class="smart-page">
		<!-- 页面标题头begin -->
		<view class="smart-page-head">
			<view class="smart-page-head-title">slider滑块</view>
		</view>
		<!-- 页面标题头end -->
		<view>显示当前值</view>
		<view>
			<slider value="20" show-value="true" @change="sliderChange"></slider>
		</view>
		<view>设置步长step</view>
		<view>
			<slider value="20" show-value="true" @change="sliderChange" step="5"></slider>
		</view>
		<view>设置最大值、最小值</view>
		<view>
			<slider show-value="true" value="100" min="50" max="500"></slider>
		</view>
		<view>设置颜色</view>
		<view>
			<slider activeColor="#4CD964" backgroundColor="#AAAAAA" block-color="#FFAADE" block-size="15"></slider>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		methods: {
			/*改变当前slider值，触发事件函数*/
			sliderChange(e) {
				console.log('当前value值是: ' + e.detail.value);
			}
		}
	}
</script>